<template>
  <div style="border: 1px solid #ccc; border-radius: 4px;">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      :defaultConfig="editorConfig"
      :mode="mode"
      :style="{ height }"
      v-model="valueHtml"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, onBeforeUnmount, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import axios from '@/request/axios'

// 编辑器实例
const editorRef = shallowRef()
const valueHtml = ref('')

// 定义组件props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: '300px'
  },
  mode: {
    type: String,
    default: 'default' // 或 'simple'
  }
})

// 定义emit事件
const emit = defineEmits(['update:modelValue'])

// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 自定义图片上传
      async customUpload(file: File, insertFn: Function) {
        // 创建FormData对象
        const formData = new FormData()
        formData.append('image', file)
        
        try {
          // 调用后端图片上传API，使用axios实例确保正确的认证
          const response = await axios.post('/api/issue_images/', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          
          if (response.image_url) {
            // 使用后端返回的图片URL，确保URL是持久有效的
            insertFn(response.image_url, file.name, '')
          } else {
            console.error('图片上传响应格式错误:', response)
            ElMessage.error('图片上传失败：服务器返回格式错误')
          }
        } catch (err: any) {
          console.error('图片上传失败:', err)
          if (err.status === 401) {
            ElMessage.error('图片上传失败：未授权，请重新登录')
          } else {
            ElMessage.error('图片上传失败，请检查网络连接')
          }
        }
      }
    }
  }
}

// 编辑器创建回调
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // 设置初始内容
  if (props.modelValue) {
    editor.setHtml(props.modelValue)
  }
}

// 编辑器内容变化回调
const handleChange = (editor: any) => {
  // 当编辑器内容改变时，触发update:modelValue事件
  emit('update:modelValue', editor.getHtml())
}

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (editorRef.value) {
      // 防止循环触发
      const currentHtml = editorRef.value.getHtml()
      if (newVal !== currentHtml) {
        // 处理可能存在的blob URL，替换为占位符或移除
        const processedHtml = newVal ? newVal.replace(/blob:[^"']*/g, '') : ''
        editorRef.value.setHtml(processedHtml)
      }
    }
  }
)

// 组件销毁前清理编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy() // 组件销毁时，及时销毁编辑器
})
</script>